<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写订单</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <link rel="stylesheet" type="text/css" href="resource/font/iconfont.css">
    <link rel="stylesheet" href="resource/css/vj-weui.css"/>
    <link rel="stylesheet" href="resource/css/style.css"/>
</head>
<body>
<div class="weui-panel weui-panel_access" style="margin-top: 0;">
    <div class="single-like">
        <i class="iconfont icon-like single-like_no"></i>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://cdn.getyourguide.com/img/tour_img-893577-146.jpg"/>
            </div>
            <div class="swiper-slide">
                <img src="https://cdn.getyourguide.com/img/tour_img-893580-146.jpg"/>
            </div>
            <div class="swiper-slide">
                <img src="https://cdn.getyourguide.com/img/tour_img-893580-146.jpg"/>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<div class="weui-panel weui-panel_access" style="margin-top: 0;">
    <div class="weui-panel__bd">
        <div class="weui-detail-box weui-detail-box_text">
            <div class="weui-detail-box__title">塞纳河游船+晚餐 塞纳河游船+晚餐 塞纳河游船+晚餐 塞纳河游船+晚餐 塞纳河游船+晚餐</div>
            <div class="weui-detail-box__price2">
                ¥1200／人起
            </div>
            <div class="weui-detail-box__desc">
                周一、二、三、四、五、六、日出团
            </div>
        </div>
    </div>
</div>

<div class="weui-tab-box">
    <!-- 项目菜单 -->
    <ul class="weui-tab-box__tabs">
        <li id="1" class="weui-tab-box__current">
            <div class="weui-tab-box__tabs__title">产品介绍</div>
            <div class="weui-tab-box__tabs__line"></div>
        </li>
        <li id="2" class="">
            <div class="weui-tab-box__tabs__title">费用说明</div>
            <div class="weui-tab-box__tabs__line"></div>
        </li>
        <li class="">
            <div class="weui-tab-box__tabs__title">酒店推荐</div>
            <div class="weui-tab-box__tabs__line"></div>
        </li>
        <li class="">
            <div class="weui-tab-box__tabs__title">购买须知</div>
            <div class="weui-tab-box__tabs__line"></div>
        </li>

    </ul>
    <div class="seize-seat">
        占位
    </div>
    <!--<div class="weui-panel__bd" id="weui-panel__bd1">
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    产品说明
                </div>
                <p class="weui-detail-box__desc">
                    游览法国最著名最具标志性的景点：壮观的圣米歇尔山及其海湾,这一旅游胜地已被联合国教科文组织列为世界遗产。
                </p>
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">参考行程</div>
                    <div class="weui-detail-box__li__content single-row">
                        <div class="single-time_title">
                            <i class="iconfont icon-time"></i>&nbsp;07:15 在集合地点集中
                        </div>
                        <div>
                            <div class="single-time_border">
                                <div class="single-time_content">
                                    早上7点15分，从巴黎市中心的旅行社出发，开始圣米歇尔山一日游的超凡体验。
                                </div>
                            </div>
                        </div>
                        <div class="single-time_title">
                            <i class="iconfont icon-time"></i>&nbsp;12:15 行程开始 到达圣米歇尔山
                        </div>
                        <div>
                            <div class="single-time_border">
                                <div class="single-time_content">
                                    在乘坐高档空调观光大巴的过程中，您可以尽量放松身心，欣赏沿途的诺曼底乡村美景，然后在中午到达目的地圣米歇尔山
                                </div>
                            </div>
                        </div>
                        <div class="single-time_title">
                            <i class="iconfont icon-time"></i>&nbsp;享用午餐
                        </div>
                        <div>
                            <div class="single-time_border">
                                <div class="single-time_content">
                                    在现代时尚的餐馆中享受精致午餐的同时，将圣米歇尔山的美景尽收眼底。
                                    餐单：Baked Camembert in phyllo dough with apples and arugula salad
                                    Salmon with rice and two vegetable sides (e.g. mushrooms and broccoli)
                                    Apple tart
                                    1 bottle of cider + 1 bottle of water for 6 pers.
                                    Coffee or tea
                                    菜单可能根据季节调整
                                </div>
                            </div>
                        </div>
                        <div class="single-time_title">
                            <i class="iconfont icon-time"></i>&nbsp;21:15 行程结束
                        </div>
                        <div>
                            <div class="single-time_not_border">
                                <div class="single-time_content">
                                    整个旅程的结束时间为下午4点30分，回到巴黎的时间约为晚上9点15分。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>-->
    <div class="weui-panel__bd" id="weui-panel__bd1">
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    酒店推荐
                </div>
                <div class="hotel-recommendation">
                    <div class="hotel-recommendation_img">
                        <img src="https://cdn.getyourguide.com/img/tour_img-893580-146.jpg"/>
                    </div>
                    <div class="hotel-recommendation_content">
                        <div>
                            <div class="hotel-recommendation_content_title">
                                巴黎文化东方酒店
                            </div>
                            <div class="hotel-recommendation_content_desc">
                                文化东方酒店金团致力于成为最顶级的豪华酒店之一，达到卓越达到卓越达到卓越达到卓越
                            </div>
                        </div>
                        <div onclick="detail(this);" class="hotel-recommendation_link ">
                            查看酒店
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="hotel-recommendation_detail_1" class="hotel-recommendation_detail">
                    <div class="hotel-recommendation_detail_content">
                        Mandarin Oriental,
                        Paris酒店是一座二十世纪三十年代的宫殿酒店，位于巴黎市中心，坐落在一幢可追溯至三十年代的历史悠久的楼宇内，设有室内园景花园、900平方米的Spa区和一间荣获两颗米其。
                    </div>
                    <div id="pb1" class="hotel-recommendation_link font_color">
                        查看图片
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-panel__bd" id="weui-panel__bd2" style="display: none;">
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    简介
                </div>
                <p class="weui-detail-box__desc">
                    塞纳河游船公司拥有15条观光游船，其中包括9条观光游船和6条餐厅游船，所有游船均配备尖端的设备，两个甲板，其中一个为全玻璃封闭式甲板，配有暖气和空调，让你无论在何种天气下都能将巴黎的美景尽收眼底。
                </p>
            </div>
        </div>
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    信息说明
                </div>
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">地点</div>
                    <div class="weui-detail-box__li__content">塞纳河游船公司</div>
                </div>
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">时间</div>
                    <div class="weui-detail-box__li__content">下午3点</div>
                </div>
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">票的形式</div>
                    <div class="weui-detail-box__li__content">电子票</div>
                </div>
            </div>
            </a>
        </div>
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    费用说明
                </div>
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">价格包含</div>
                    <div class="weui-detail-box__li__content">
                        修道院门票<br/>
                        午餐饮料<br/>
                        导游陪同翻译服务
                    </div>
                </div>
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">价格不包含</div>
                    <div class="weui-detail-box__li__content">
                        酒店来回接送<br/>
                        小费<br/>
                        其他未提及费用
                    </div>
                </div>
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">注意事项</div>
                    <div class="weui-detail-box__li__content">
                        由于需要登山游览，可能造成不适或疲劳，本行程不适合行动不便者。<br/>
                        冬季时节，建议您注意穿着舒适的运动鞋和保暖的服装。<br/>
                        行程时长1天。
                    </div>
                </div>
            </div>
            </a>
        </div>
    </div>
</div>
<div class="nav-seize-seat"></div>
<div class="nav-price">
    <div class="nav-price_info">
        <span class="nav-price_info_title">总额：</span><span class="nav-price_info_price">￥290,00</span>
    </div>
    <div class="nav-price_button">
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary open-popup" data-target="#full"
           style="margin-top: 0">立即咨询</a>
    </div>
    <div class="clear"></div>
</div>
<div id="full" class='weui-popup__container'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal close-popup" style="background-color: rgba(0,0,0,0);">
        <div class="custom-service_information">
            <div class="custom-service_img">
                <img src="resource/images/swiper-1.jpg" alt="">
            </div>
            <div class="custom-service_info">
                <div>
                    知游人
                </div>
                <div class="custom-service_phone">
                    020-22042979
                </div>
            </div>
            <div class="clear"></div>
            <div class="custom-service_qrcode">
                <div class="custom-service_qrcode_img">
                    <img src="resource/images/icon-country-thailand.jpg" alt="">
                </div>
                <div class="custom-service_qrcode_desc">
                    长按扫描二维码
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script src="resource/js/zepto.js"></script>
<script src="resource/js/fastclick.js"></script>
<script src="resource/js/vj-weui.js"></script>
<script>
    $(function () {
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 3000
        });

        var pb1 = $.photoBrowser({
            items: [
                "resource/images/swiper-1.jpg",
            ],

            onSlideChange: function (index) {
                console.log(this, index);
            },

            onOpen: function () {
                console.log("onOpen", this);
            },
            onClose: function () {
                console.log("onClose", this);
            }
        });
        $("#pb1").click(function () {
            pb1.open();
        });

        //获取酒店内容元素
        var hotel_recommendation = $('.hotel-recommendation');
        $(hotel_recommendation).find('.hotel-recommendation_img').height(hotel_recommendation.height());

        /**
         * 根据url #hash值切换tab签
         */
        var hash = window.location.hash;
        if (hash) {
            var index = hash.substring(1);
            exchangeTab($(".weui-tab-box__tabs li").eq(index));
        }

        /**
         * tab标签栏切换
         */
        $(".weui-tab-box__tabs li").click(function () {
            var $this = $(this);
            var id = $this.attr("id");
            exchangeTab($this, id);
        });

        //tab change
        $(window).scroll(function () {
            var nav_tab = $(".weui-tab-box").position().top;
            if ($(window).scrollTop() >= (nav_tab + 10)) {
                $(".weui-tab-box__tabs").addClass("weui-tab-box__add__class");
                $(".weui-tab-box__content").addClass("weui-tab-box__padding__class");
                $(".seize-seat").show();

            } else {
                $(".weui-tab-box__tabs").removeClass("weui-tab-box__add__class");
                $(".weui-tab-box__content").removeClass("weui-tab-box__padding__class");
                $(".seize-seat").hide();

            }
        })

        FastClick.attach(document.body);
    });

    function detail(obj) {
        $(obj).toggleClass('font_color');
        $('#hotel-recommendation_detail_1').toggle();
    }

    function exchangeTab($tab, id) {
        var $this = $tab;

        if ($this.hasClass("weui-tab-box__current")) {
            return false;
        }

        if ($this.hasClass("menu")) {
            return true;
        }

        if (id == "1") {
            $("#weui-panel__bd1").show();
            $("#weui-panel__bd2").hide();
        } else {
            $("#weui-panel__bd2").show();
            $("#weui-panel__bd1").hide();
        }

        $this.addClass("weui-tab-box__current").siblings("li").removeClass("weui-tab-box__current");
        var index = $this.index();

        var $currentTabContent = $this.parent().parent().find(".weui-tab-box__content").eq(index).addClass("weui-tab-box__current");
        $currentTabContent.siblings(".weui-tab-box__content").removeClass("weui-tab-box__current");

        /*使用document.location.replace，hash锚点改变的url不会写入缓存，不影响后退功能*/
        document.location.replace(getFilterUrl(index));
    }

    function getFilterUrl(hash) {
        return document.location.protocol + '//' + document.location.host + document.location.pathname + document.location.search + "#" + hash;
    }
</script>
<script src="resource/js/swiper.js"></script>

